<template>
    <!-- <div class="divbox"><input type="text" placeholder="请输入想看的电影"><button href="">搜索</button></div> -->
    <div class="search"><input type="text" placeholder="请输入你想搜索的内容" aria-label="搜索" value="" autofocus=""><button
            type="button" aria-label="搜索"><i></i><span>搜索</span></button></div>
    <ul>
        <li v-for="item in data.data1" class="libox">
            <b>电影类型</b>
            <b>{{ item.category }}</b>
            <b>{{ item.name }}</b>
            <br>
            <img :src=item.poster>
        </li>
    </ul>
</template>
<script setup>
import { reactive, onMounted } from "vue"
let data = reactive({
    data1: []
})
onMounted(() => {
    shuju()
})
const shuju = () => {
    fetch(`https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=8343802`, {
        method: "GET",
        headers: {
            'X-Host': 'mall.film-ticket.film.list'
        },
    })
        .then(res => res.json())
        .then(res => {
            data.data1 = res.data.films
            console.log(res.data.films)
            console.log(data.data1)
        })
}

</script>

<style lang="scss" scoped>
.libox {
    border-bottom: 1px solid #31312d;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    align-items: center;

    b {
        font-size: 20px;
    }

    img {
        width: 70px
    }
}

.search {
    display: flex;
    margin-top: 10px;
    justify-content: center;

    input {
        width: 30%;
        height: 40px;
        // border-radius: 1px;
        border: 1px solid #fff;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
    }

    button {
        width: 55px;
        height: 44px;
        background-color: #fff;
        border: none;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        cursor: pointer;
    }

    button:hover {
        background-color: #b7abab;
    }
}


.divbox {
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    input {
        width: 33%;
        height: 40px;
        border-radius: 5px;
        border: none;
    }

    button {
        width: 65px;
        height: 45px;
        border-radius: 5px;
        text-decoration: none;
        color: #2a1c1c;
        border: none;
    }

    button:hover {
        background-color: rgb(143, 78, 78);
    }
}
</style>